<template>
    <div class="explain" v-if="isShowModel" @click="outClick">
        <div class="content-box" ref="contentBox">
            <a class="close-button pointer" @click="closeModel">x</a>
            <p class="content-text" v-text="message"></p>
            <div class="not-again-box">
                <label>
                    <input type="checkbox" class="fl" v-model="notAgain">
                    <span class="not-again fl pointer">不再提醒</span>
                </label>
            </div>
            <button class="button" @click="closeModel">知道了</button>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Explain",
    data() {
      return {
        notAgain: false,
        isShowModel: true,
      }
    },
    props: {
      message: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    methods: {
      checkNotAgain: function () {
        this.notAgain = !this.notAgain
      },
      closeModel: function () {
        this.isShowModel = false
        this.$emit('notAgain', this.notAgain)
      },
      outClick: function (event) {
        if (this.$refs.contentBox && !this.$refs.contentBox.contains(event.target)) {
          this.closeModel()
        }
      }
    }
  }
</script>

<style scoped>

    .explain {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        z-index: 500;
    }

    .close-button {
        color: #999999;
        font-size: 25px;
        font-weight: 300;
        float: right;
        margin: 10px;
        right: 10px;
        position: absolute;
    }

    .content-box {
        position: absolute;
        top: calc((100vh - 300px) / 2);
        width: 380px;
        height: 198px;
        box-sizing: border-box;
        padding: 0 26px;
        left: 0;
        right: 0;
        margin: auto;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
    }

    .content-text {
        margin: 50px 0 18px;
        width: 329px;
        height: 39px;
        font-size: 14px;
        color: #323232;
        font-weight: 500;
        line-height: 25px;
    }

    .not-again-box {
        height: 20px;
    }

    .not-again {
        font-size: 14px;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        margin-left: 5px;
        line-height: 16px;
    }

    .button {
        border: none;
        margin: 17px 120px 0;
        width: 88px;
        height: 32px;
        background: rgba(70, 144, 245, 1);
        border-radius: 2px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }
</style>
